import React, { useEffect, useRef, useState } from 'react';
import EchartsContainer from './EchartsContainer';
import mapChina from './map-china'
import * as Echarts from 'echarts';
import ChinaGeoMap from './china.json';
import './index.less'
import { regionCount } from './service';
import { useRequest } from '@umijs/max';

Echarts.registerMap('chinaMap', ChinaGeoMap as any);

interface MapProps {
    height?: number | string
}

const Map: React.FC<MapProps> = ({
    height
}) => {
    const { data, loading } = useRequest(() => {
        return regionCount({})
    })

    return (
        <div className='map_wrap'>
            {!loading && <EchartsContainer
                height={height}
                option={mapChina(data?.map((item: any) => ({ name: item.region, value: item.count })) || [])}>
            </EchartsContainer>}
        </div>
    );
};

export default Map